<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手写签名示例</title>
    <link rel="stylesheet" href="/layui/2.5.6/css/layui.css">
    <style>
        #sign-shade {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #000;
            opacity: 0.3;
            z-index: 1000000;
        }

        #sign-wrap {
            background-color: #FFF;
            border: 1px solid #000;
            z-index: 1000001;
            position: fixed;
            bottom: 60px;
            left: 50%;
            margin-left: -230px;
            width: 450px;
            height: 150px;
        }

        #sign-wrap div {
            width: 145px;
            margin: 10px auto;
        }
    </style>
</head>

<body>
<fieldset class="layui-elem-field site-demo-button" style="margin: 30px;">
    <legend>签名</legend>
    <div style="margin: 20px 30px 10px;">
        <input type="hidden" name="signImg">
        <img id="signImg" src="/s.gif" style="width:120px;height:40px;border: 1px solid #e6e6e6;">
        <button class="layui-btn layui-btn-normal" onclick="sign()">签名</button>
    </div>
</fieldset>
<script src="/jquery/3.4.1/jquery.min.js"></script>
<script src="./signature.min.js"></script>
<script>
    function sign() {
        var sb = [];
        sb.push('<div id="sign-shade"></div>');
        sb.push('<div id="sign-wrap">');
        sb.push('<canvas id="signature"></canvas>');
        sb.push('<div>');
        sb.push('<button id="signReset" class="layui-btn layui-btn-primary">重签</button>');
        sb.push('<button id="signConfirm" class="layui-btn layui-btn-normal">确认</button>');
        sb.push('</div>');
        sb.push('</div>');
        $('body').append(sb.join(''));
        var signature = new SmoothSignature(document.getElementById('signature'), {width: 450, height: 150});
        $('#signReset').click(function () {
            signature.clear();
        });
        $('#signConfirm').click(function () {
            var isEmpty = signature.isEmpty();
            if (isEmpty) {
                alert("您还没有签名，请签名后再确认");
                return;
            }
            var png = signature.getPNG();
            $('input[name="signImg"]').val(png);
            $('#signImg').attr('src', png);
            $('#sign-wrap,#sign-shade').remove();
        });
    }
</script>
</body>

</html>